import React, { useState } from 'react';
import { Card, Button, Alert, Typography, Space, Divider } from 'antd';
import { DatabaseOutlined, CheckCircleOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import { initApi } from '../../services/api';

const { Title, Paragraph, Text } = Typography;

const DataInit = () => {
  const [loading, setLoading] = useState(false);
  const [initResult, setInitResult] = useState(null);

  const handleInitData = async () => {
    setLoading(true);
    setInitResult(null);
    
    try {
      const response = await initApi.initData();
      setInitResult({
        success: true,
        message: response.message || '数据初始化成功！',
        data: response.data
      });
    } catch (error) {
      setInitResult({
        success: false,
        message: error.message || '数据初始化失败',
        error: error
      });
    } finally {
      setLoading(false);
    }
  };

  return (
    <div>
      <Card>
        <Space direction="vertical" size="large" style={{ width: '100%' }}>
          <div>
            <Title level={3}>
              <DatabaseOutlined style={{ marginRight: 8 }} />
              数据初始化
            </Title>
            <Paragraph type="secondary">
              点击下方按钮初始化系统基础数据，包括分类、标签、菜品等信息。
            </Paragraph>
          </div>

          <Alert
            message="注意事项"
            description={
              <ul style={{ marginBottom: 0, paddingLeft: 20 }}>
                <li>数据初始化会从 data.json 文件中读取预设数据</li>
                <li>如果数据已存在，不会重复创建</li>
                <li>初始化过程可能需要几秒钟时间</li>
                <li>建议在系统首次部署时执行此操作</li>
              </ul>
            }
            type="info"
            showIcon
          />

          <div style={{ textAlign: 'center' }}>
            <Button
              type="primary"
              size="large"
              icon={<DatabaseOutlined />}
              loading={loading}
              onClick={handleInitData}
              style={{ minWidth: 200 }}
            >
              {loading ? '正在初始化...' : '开始初始化数据'}
            </Button>
          </div>

          {initResult && (
            <>
              <Divider />
              <Alert
                message={initResult.success ? '初始化成功' : '初始化失败'}
                description={initResult.message}
                type={initResult.success ? 'success' : 'error'}
                icon={initResult.success ? <CheckCircleOutlined /> : <ExclamationCircleOutlined />}
                showIcon
              />
              
              {initResult.success && initResult.data && (
                <Card size="small" title="初始化详情">
                  <Space direction="vertical" style={{ width: '100%' }}>
                    {initResult.data.categoriesCreated && (
                      <Text>
                        ✅ 创建分类: {initResult.data.categoriesCreated} 个
                      </Text>
                    )}
                    {initResult.data.tagsCreated && (
                      <Text>
                        ✅ 创建标签: {initResult.data.tagsCreated} 个
                      </Text>
                    )}
                    {initResult.data.dishesCreated && (
                      <Text>
                        ✅ 创建菜品: {initResult.data.dishesCreated} 个
                      </Text>
                    )}
                    {initResult.data.userCreated && (
                      <Text>
                        ✅ 创建默认用户: 1 个
                      </Text>
                    )}
                  </Space>
                </Card>
              )}
            </>
          )}

          <Card size="small" title="数据说明" type="inner">
            <Space direction="vertical">
              <Text strong>预设数据包含：</Text>
              <ul style={{ marginBottom: 0, paddingLeft: 20 }}>
                <li><Text>分类：家常菜、素食、荤菜等</Text></li>
                <li><Text>标签：健康、快手、下饭等</Text></li>
                <li><Text>菜品：10道精选家常菜</Text></li>
                <li><Text>用户：默认管理员账户</Text></li>
              </ul>
            </Space>
          </Card>
        </Space>
      </Card>
    </div>
  );
};

export default DataInit;